<template>
  <SumbitDialog
    class="updateDialog"
    width="800px"
    :dialogVisible.sync="dialogVisible"
    sumbitColor="#165DFF"
    sumbitText="保存"
    @onClose="resetForm"
    @onSubmit="submitForm"
  >
    <div slot="title">素材设置上传</div>
    <div class="flexbox">
      <div style="width:50%">
        <div class="L-box poster_img flexbox flexcolumn flexcenter flexjust">
         <div class="poster_img flexbox flexcolumn flexcenter flexjust">
                <img src="../../../assets/img/file_icon3.svg" alt="">
                <span class="file_text">将应用到 {{addMtInfoForm.quantity}} 个素材上</span>
            </div>
        </div>
      </div>
      <div style="width:50%">
        <div class="R-box">
            <el-form  :model="addMtInfoForm" :rules="rules" ref="ruleForm" label-position="top" label-width="80px">
                <el-form-item label="品牌" prop="brand_id" :rules="{ required: true, message: '请选择品牌', trigger: ['blur', 'change']}">
                    <el-select v-model="addMtInfoForm.brandSelect" filterable placeholder="请选择品牌" value-key='id' style="width:100%" @change="selectBrand">
                        <el-option :label="item.name" :value="item" v-for="item in brandList" :key="item.id">
                            <span>
                                {{item.name}}
                            </span>
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="产品" prop="product_id" :rules="{ required: true, message: '请选择产品', trigger: ['blur', 'change']}" class="custom_label">
                    <div slot="label" class="head_tag flexbox flexbetween flexcenter" style="width: 100%;"  >
                        <div>产品</div>
                        <div @click="addProductTag(addMtInfoForm,1)" :class="addMtInfoForm.productSelect.id?'':'not_disabled'">+产品标签</div>
                    </div>
                    <el-select v-model="addMtInfoForm.productSelect" filterable placeholder="请选择产品" value-key='id' style="width:100%" :disabled="!addMtInfoForm.brand_id" @change="selectProduct">
                        <el-option :label="item.name" :value="item" v-for="item in productList" :key="item.id"></el-option>
                    </el-select>
                    <div class="flexbox flexcenter " style="flex-wrap:wrap;margin-top:12px" v-if="addMtInfoForm.product_tag_id.length > 0">
                        <div class="tag_box" v-for="(item,index) in addMtInfoForm.product_tag_id">
                            <span>{{item.name}}</span><svg @click="handleDel('product_tag_id',index)" xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 14 14" fill="none"><path d="M10.1198 4.86978C10.3931 4.59641 10.3931 4.1532 10.1198 3.87983C9.84641 3.60646 9.4032 3.60646 9.12983 3.87983L6.9998 6.00986L4.86978 3.87983C4.59641 3.60646 4.1532 3.60646 3.87983 3.87983C3.60646 4.1532 3.60646 4.59641 3.87983 4.86978L6.00986 6.9998L3.87983 9.12983C3.60646 9.4032 3.60646 9.84641 3.87983 10.1198C4.1532 10.3931 4.59641 10.3931 4.86978 10.1198L6.9998 7.98975L9.12983 10.1198C9.4032 10.3931 9.84641 10.3931 10.1198 10.1198C10.3931 9.84641 10.3931 9.4032 10.1198 9.12983L7.98975 6.9998L10.1198 4.86978Z" fill="#ACB2BB"/></svg> 
                        </div>
                    </div>
                </el-form-item>
                <el-form-item label="拍摄人员" prop="photographer_uid" :rules="{ required: true, message: '请选择拍摄人员', trigger: ['blur', 'change']}">
                    <el-select v-model="addMtInfoForm.photographer_uid" multiple collapse-tags filterable placeholder="请选择拍摄" style="width:100%">
                        <el-option label="无" :value="9999" :disabled="!addMtInfoForm.photographer_uid.includes(9999) && addMtInfoForm.photographer_uid.length > 0"></el-option>
                        <el-option :disabled="addMtInfoForm.photographer_uid == 9999" :label="item.nickname" :value="item.id" v-for="item in photoSzList" :key="item.id"></el-option>
                        <!-- <el-option :label="item.nickname" :value="item.id" v-for="item in photoSzList" :key="item.id"></el-option> -->
                    </el-select>
                </el-form-item>
                <el-form-item>
                    <div slot="label" class="bind_box">
                        <div>绑定需求排期 ID</div>
                        <div>绑定后，此素材将在被绑定的需求列表中展示</div>
                    </div>
                    <el-input v-model="sch_name" type="Number" placeholder="请输入需求排期 ID 按回车键添加" @keyup.enter.native="handleEnter(sch_name)">
                        <div slot="suffix" style="margin-right: 7px;margin-top: 4px;">
                            <svg  xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" fill="none">
                            <path d="M12 5V7.5C12 8.60457 11.1046 9.5 10 9.5H3.5M3.5 9.5L5.5 7.5M3.5 9.5L5.5 11.5" stroke="#616C85" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
                            </svg>
                        </div>
                    </el-input>
                    <div class="flexbox flexcenter " style="flex-wrap:wrap;margin-top:12px" v-if="addMtInfoForm.sch_id.length > 0">
                        <div class="tag_box" v-for="(item,index) in addMtInfoForm.sch_id">
                            <span>{{item}}</span><svg @click="handleDel('sch_id',index)" xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 14 14" fill="none"><path d="M10.1198 4.86978C10.3931 4.59641 10.3931 4.1532 10.1198 3.87983C9.84641 3.60646 9.4032 3.60646 9.12983 3.87983L6.9998 6.00986L4.86978 3.87983C4.59641 3.60646 4.1532 3.60646 3.87983 3.87983C3.60646 4.1532 3.60646 4.59641 3.87983 4.86978L6.00986 6.9998L3.87983 9.12983C3.60646 9.4032 3.60646 9.84641 3.87983 10.1198C4.1532 10.3931 4.59641 10.3931 4.86978 10.1198L6.9998 7.98975L9.12983 10.1198C9.4032 10.3931 9.84641 10.3931 10.1198 10.1198C10.3931 9.84641 10.3931 9.4032 10.1198 9.12983L7.98975 6.9998L10.1198 4.86978Z" fill="#ACB2BB"/></svg> 
                        </div>
                    </div>
                </el-form-item>
                 <el-form-item class="heade_from">
                    <div slot="label" class="head_tag flexbox flexbetween flexcenter">
                        <div>素材标签</div>
                        <div @click="addMaterialTag(addMtInfoForm,1)">+素材标签</div>
                    </div>
                 <LabelSettingDialog :taglist="tag_list" :ModuleName="ModuleName" ref="labelsettingbulk" />
                    <div class="flexbox flexcenter " style="flex-wrap:wrap;margin-top:12px" v-if="addMtInfoForm.tag_id.length > 0">
                        <div class="tag_box" v-for="(item,index) in addMtInfoForm.tag_id">
                            <span>{{item.name}}</span><svg @click="handleDel('tag_id',index)" xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 14 14" fill="none"><path d="M10.1198 4.86978C10.3931 4.59641 10.3931 4.1532 10.1198 3.87983C9.84641 3.60646 9.4032 3.60646 9.12983 3.87983L6.9998 6.00986L4.86978 3.87983C4.59641 3.60646 4.1532 3.60646 3.87983 3.87983C3.60646 4.1532 3.60646 4.59641 3.87983 4.86978L6.00986 6.9998L3.87983 9.12983C3.60646 9.4032 3.60646 9.84641 3.87983 10.1198C4.1532 10.3931 4.59641 10.3931 4.86978 10.1198L6.9998 7.98975L9.12983 10.1198C9.4032 10.3931 9.84641 10.3931 10.1198 10.1198C10.3931 9.84641 10.3931 9.4032 10.1198 9.12983L7.98975 6.9998L10.1198 4.86978Z" fill="#ACB2BB"/></svg> 
                        </div>
                    </div>
                </el-form-item>
                 <el-form-item>
                    <div slot="label" class="bind_box">
                        <div>自定义素材名称</div>
                        <!-- <div>最终素材名称格式为：品牌名称+产品名称+自定义素材名称</div> -->
                    </div>
                    <el-autocomplete v-model="addMtInfoForm.defined_name"  :fetch-suggestions="querySearch" placeholder="请输入自定义素材名称" style="width:100%"
                        maxlength="12"
                        show-word-limit>
                    </el-autocomplete>
                </el-form-item>
            </el-form>
        </div>
      </div>
    </div>
    <LabelDialog ref="labelporduct" ReqUrl="/adminapi/Materialfj/tagAdd" :taglist="Type_tag_list" TagType="3" :ProductId="addMtInfoForm.product_id" 
            @getTagList="(query)=>{getNewTagList(query,3)}"
            @submitForm="submitDataForm"/>
  </SumbitDialog>
</template>

<script>
import SumbitDialog from "@/components/components/SumbitDialog";
import LabelSettingDialog from "../../LabelSettings/index";
import LabelDialog from "@/components/components/LabelDialog";
export default {
  data() {
    return {
      ModuleName: "Storyboard",
      dialogVisible: false,
      brandList: [], //品牌列表
      productList: [], //产品列表
      photoSzList:[],//拍摄人员列表
      addMtInfoForm: {
        brand_id: "",//品牌ID
        brand_name: "",//品牌名称
        defined_name:"",
        material: "",
        photographer_uid: [],
        product_id: "",
        product_name: "",
        sch_id: [],
        tag_id: [],
        product_tag_id:[],
        process: 0,
        brandSelect:{},
        productSelect:{},
        quantity:1,
      },
      CopyAddMtInfoForm:{},
      sch_name:"",
      tag_list:[],
      restaurants:[],
      Type_tag_list:[],
    };
  },
  created() {
    this.$bus.$on("addInfoBulk", (e) => {
      this.dialogVisible = e.dialogVsb;
      this.addMtInfoForm.quantity = e.quantity;
      this.addMtInfoForm.tag_id = e.tag_id;
      this.getBrandList();
      this.getSzPhotoList();
      this.restaurants = JSON.parse(localStorage.getItem('restaurants')) || [];
    //   this.CopyAddMtInfoForm = JSON.parse(JSON.stringify(this.addMtInfoForm))
    });
  },
  components: {
    SumbitDialog,
    LabelSettingDialog,
    LabelDialog
  },
  methods: {
    submitDataForm(addMtInfoForm){
        this.$refs.labelporduct.closeDialog();
        this.$refs.labelporduct.loading = false;this.$refs.labelporduct.closeDialog();
        this.$refs.labelporduct.loading = false;
        this.addMtInfoForm.product_tag_id = addMtInfoForm
    },
    async addProductTag(addMtInfoForm){
        if(!addMtInfoForm.productSelect.id)return;
        await this.getNewTagList(undefined,3);
            this.$nextTick(()=>{
                this.$refs.labelporduct.openDialog();
                this.$refs.labelporduct.selectTag(this.Type_tag_list[0]) 
                this.$refs.labelporduct.tagpid = JSON.parse(JSON.stringify(addMtInfoForm.product_tag_id))
            })
    },
    async getNewTagList(query,tag_type) {
            const { data: res } = await this.$http.post(
                "adminapi/materialfj/tagList",
                {
                    page: 1,
                    limit: 0,
                    query:query?query:undefined,
                    tag_type:tag_type,
                    product_id:this.addMtInfoForm.product_id?this.addMtInfoForm.product_id:undefined
                }
            );
            if (res.code !== 200) {
                this.$message.error(res.msg);
                return;
            } else {
              this.Type_tag_list = res.data.list;
            }
        },
     querySearch(queryString, cb) {
        let restaurants = this.restaurants;
        let results = queryString ? restaurants.filter(this.createFilter(queryString)) : restaurants;
        // 调用 callback 返回建议列表的数据
        cb(results);
      },
      createFilter(queryString) {
        return (restaurant) => {
          return (restaurant.value.toLowerCase().indexOf(queryString.toLowerCase()) === 0);
        };
      },
    submitForm(){
      this.$refs['ruleForm'].validate(async (valid) => {
              if (valid) {
                  // this.loading = true
                  let no = false;
                  this.addMtInfoForm.photographer_uid.forEach(e=>{
                        if(e == 9999){
                            no = true;
                        }
                    })
                  console.log(this.addMtInfoForm,'/*/*/*/*/*/*/')
                //   if( this.CopyAddMtInfoForm.brand_id == this.addMtInfoForm.brand_id
                //         && JSON.stringify(this.CopyAddMtInfoForm.photographer_uid) == JSON.stringify(this.addMtInfoForm.photographer_uid)
                //         && this.CopyAddMtInfoForm.product_id == this.addMtInfoForm.product_id ){
                //     this.$parent.$parent.uploadMultiTagandschId(JSON.parse(JSON.stringify(this.addMtInfoForm.tag_id)),JSON.parse(JSON.stringify(this.addMtInfoForm.sch_id)))
                //        this.dialogVisible = false;
                //        return;
                //   }

                  const { data: res } = await this.$http.post(
                      "adminapi/materialfj/materialUploadName",
                      {...this.addMtInfoForm,
                        photographer_uid: no ? [] : this.addMtInfoForm.photographer_uid
                      }
                  );
                  if (res.code !== 200) {
                      // this.loading = false;  
                      this.$message.error(res.msg);
                      return;
                  }else{
                      // this.loading = false;
                      this.$parent.$parent.uploadMulti(res.data,JSON.parse(JSON.stringify({...this.addMtInfoForm,process:1})))
                      let restaurants = JSON.parse(localStorage.getItem('restaurants')) || [];
                      if(restaurants.length >= 5){
                          let is_Data = restaurants.findIndex(e => e.value == this.addMtInfoForm.defined_name);
                            if(is_Data == '-1'){
                                restaurants = restaurants.splice(1)
                                console.log(restaurants)
                                localStorage.setItem('restaurants',JSON.stringify([...restaurants,{value:this.addMtInfoForm.defined_name}]))
                            }
                        }else{
                            localStorage.setItem('restaurants',JSON.stringify([...restaurants,{value:this.addMtInfoForm.defined_name}]))
                        }
                      this.resetForm();
                      this.dialogVisible = false;
                  }
              } else {
                  return false;
              }
          });
    },
    // 获取标签
    async getTagList(query) {
            const { data: res } = await this.$http.post(
                "adminapi/materialfj/tagList",
                {
                    page: 1,
                    limit: 0,
                    query:query?query:undefined,
                    tag_type:1
                }
            );
            if (res.code !== 200) {
                this.loading = false;
                this.$message.error(res.msg);
                return;
            } else {
              this.tag_list = res.data.list;
            }
        },
    // 添加标签
  async  addMaterialTag(item, type) {
     await this.getTagList();
        this.$nextTick(()=>{
            this.$refs.labelsettingbulk.openDialog();
            // // this.$refs.labelsetting.addMaterialTagForm.id = item.id
            // // this.$refs.labelsetting.source_type = type
            this.$refs.labelsettingbulk.selectTag(this.tag_list[0]) 
            this.$refs.labelsettingbulk.tagpid = this.addMtInfoForm.tag_id
        })
    },
    save() {
      this.dialogVisible = false;
    },
    GettagData(data){
      this.addMtInfoForm.tag_id = JSON.parse(JSON.stringify(data))
    },
    selectBrand() {
      console.log(this.addMtInfoForm)
        this.addMtInfoForm.brand_id = this.addMtInfoForm.brandSelect.id;
        this.addMtInfoForm.brand_name = this.addMtInfoForm.brandSelect.name;
        this.productList = this.addMtInfoForm.brandSelect.next;
        this.addMtInfoForm.productSelect = {}
        this.addMtInfoForm.product_id = "";
        this.addMtInfoForm.product_name = "";
        this.addMtInfoForm.photographer_uid = [];
    },
    // 产品选择
    selectProduct() {
        this.addMtInfoForm.product_id = this.addMtInfoForm.productSelect.id;
        this.addMtInfoForm.product_name = this.addMtInfoForm.productSelect.name;
        this.addMtInfoForm.product_tag_id = [];
        this.addMtInfoForm.business_scene = "";
    },
    // 获取产品
    async getProductList() {
        const { data: res } = await this.$http.post(
            "adminapi/project/productList",
            {
                brand_id: this.addMtInfoForm.brand_id,
            }
        );
        if (res.code !== 200) {
            this.$message.error(res.msg);
            return;
        } else {
            this.productList = res.data;
        }
    },
    //获取品牌列表
    async getBrandList() {
        const { data: res } = await this.$http.post(
            "adminapi/materialfj/bpList"
        );
        if (res.code !== 200) {
            this.$message.error(res.msg);
            return;
        } else {
            this.brandList = res.data;
        }
    },
    // 获取拍摄人员列表-深圳
        async getSzPhotoList() {
            const { data: res } = await this.$http.post(
                "adminapi/company/szPhotographerList",
            );
            if (res.code !== 200) {
                this.$message.error(res.msg);
                return;
            } else {
                this.photoSzList = res.data;
            }
        },
    handleDel(name,i){
        this.addMtInfoForm[name].splice(i,1);
    },   
    handleEnter(val) {
        if(this.addMtInfoForm.sch_id.includes(val.trim()))return this.$message.error('存在重复ID标签');
        this.addMtInfoForm.sch_id.push(val);
        this.sch_name = "";
    },
    resetForm() {
        // this.$refs['ruleForm'].resetFields();
        this.sch_name = "";
        this.addMtInfoForm.sch_id = [];
        this.addMtInfoForm.tag_id = [];
        // this.addMtInfoForm.brandSelect = {};
        this.addMtInfoForm.defined_name = "";
        // this.addMtInfoForm.productSelect = {};
    },
  },
};
</script>

<style scoped>
.poster_img{
    height: 600px;
    padding: 0 15px;
}
.file_text{
    font-size: 14px;
    color: #616C85;
    margin-top: 5px;
}
.updateDialog >>> .el-dialog__body{
    padding: 0 !important;
} 
.updateDialog >>> .el-dialog__header{
   padding: 0 20px !important;
    border-bottom: 1px solid #EBEBEB !important;
    height: 71px !important;
}
.updateDialog >>> .el-dialog__footer{
    padding: 12px 20px 20px !important;
}
/deep/ .el-select{
    width: 100%;
}
/deep/ .el-input__inner{
    line-height: 36px;
    height: 36px;
    border-radius: 8px;
}

.L-box{
    padding: 31px 35px;
    background: rgba(165, 177, 209, 0.10);
}
.R-box{
    overflow: auto;
    max-height: 663px;
    padding: 20px 20px 0;
}

.bind_box{
    margin-bottom: 10px;
}
.bind_box div:nth-child(1){
    line-height: 20px;
}
.bind_box div:nth-child(2){
    line-height: 20px;
    font-size: 12px;
    color: #ACB2BB;
}
.tag_box{
    height: 20px;
    line-height: 20px;
    display: flex;
    align-items: center;
    background: #F8F8F9;
    padding: 0 4px 0 8px;
    border-radius: 6px;
    margin-right: 4px;
    margin-bottom: 12px;
}
.tag_box svg{
    cursor: pointer;
}
/deep/ .heade_from label{
  width: 100%;
  line-height: 24px;
  padding:0 !important;
}
.head_tag div:nth-child(2){
  cursor: pointer;
  font-size: 12px;
  color: #165DFF;
}
.custom_label /deep/ .el-form-item__label{
    display: flex;
}
.not_disabled{
    color: #c0c4cc !important;
    cursor: not-allowed !important;
}
</style>